<template>
  <div class="basic-information">
    <div class="user-information">
      <div class="left">
        <el-form ref="form" label-width="80px" size="mini">
          <el-form-item label="Logo:">
              <el-image style="width: 50px;height: 50px;border-radius: 6px;" v-if="merchantDetails.logo_image" :src="merchantDetails.logo_image" :preview-src-list="[merchantDetails.logo_image]" />
              <span>-</span>
          </el-form-item>
          <el-form-item label="商户名称:">
            <span>{{merchantDetails.name}}</span>
          </el-form-item>
          <el-form-item label="商户类型:">
            <span style="color: #0076f6;" v-if="typeRadio == 1">个人</span>
            <span style="color: #0076f6;" v-if="typeRadio == 2">个体工商</span>
            <span style="color: #0076f6;" v-if="typeRadio == 3">企业</span>
          </el-form-item>
          <el-form-item label="联系人:">
            <span>{{ merchantDetails.user_name}}</span>
          </el-form-item>
          <el-form-item label="覆盖区域:">
            <span>{{ areaTitle }}</span>
          </el-form-item>
          <el-form-item label="店铺介绍:">
            <el-input
              v-model="merchantDetails.description"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              disabled
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form ref="form" label-width="80px" size="mini">
          <el-form-item label="店铺背景:">
            <el-image style="width: 50px;height: 50px;border-radius: 6px;" v-if="merchantDetails.background_image" :src="merchantDetails.background_image" :preview-src-list="[merchantDetails.background_image]" />
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="商户分类:">
            <span>{{ cateTitle }}</span>
          </el-form-item>
          <el-form-item label="入驻时间:">
            <span>{{merchantDetails.created_at ? merchantDetails.created_at :'-' }}</span>
          </el-form-item>
          <el-form-item label="联系电话:">
            <span>{{merchantDetails.user_cellphone}}</span>
          </el-form-item>
          <el-form-item label="联系地址:">
            <span>{{merchantDetails.address ? merchantDetails.address : '-'}}</span>
          </el-form-item>
          <el-form-item label="店铺备注:">
            <el-input
            v-model="merchantDetails.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder=""
              disabled
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--    关联账户-->
    <div class="relevancy-account">
      <div class="account-header">
        <p>关联账户</p>
        <p>
          <span style="color: #81b337;margin-right: 16px">已关联</span>
          <!-- <span style="margin-right: 4px">关联记录</span> -->
          <!-- <i class="el-icon-time" /> -->
        </p>
      </div>
    </div>
    <div class="account-content">
      <div class="left">
        <el-form ref="form" label-width="80px" size="mini">
          <el-form-item label="账户ID:">
            <span>{{ merchantCetails.id }}</span>
          </el-form-item>
          <el-form-item label="账户昵称:">
            <span>{{ merchantCetails.nickname }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form ref="form" label-width="80px" size="mini">
          <el-form-item label="登录账户:">
            <span>{{merchantCetails.mobile}}</span>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    merchantDetailss: {
      type: [String,Object],
      required: true,
      default: () => {}
    },
    type: {
      type: [String, Number],
      required: true
    },
    cateList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      typeRadio: this.type,
      merchantDetails:{},
      merchantCetails:{}
    }
  },
  computed: {
    areaTitle: function() { // 省市区拼接
      const { province_name, city_name, county_name } = this.merchantDetails
      return province_name + '-' + city_name + '-' + county_name
    },
    cateTitle: function() { // 服务类目
      const item = this.cateList.find(item => this.merchantDetails.mer_cate_id == item.id)
      return (item && item.name) || '-'
    }
  },
  watch: {
    type: function(e) {
      this.typeRadio = e
    },
    merchantDetailss: function(e) {
      this.merchantDetails = e
      this.merchantCetails = e.user_info
    }
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
  .basic-information{
    .user-information{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left,.right{
        width: 48%;
      }
    }
    .relevancy-account{
      width: 100%;
      .account-header{
        border-left: 4px solid #4095e5;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #eeeeee;
        padding: 0 20px;
        box-sizing: border-box;
        p{
          font-size: 14px;
        }
      }
    }
    .account-content{
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .left,.right{
        width: 48%;
      }
    }
  }
</style>
